﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MONITOR - SMALL SITE, BIG-NEWs</title>
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link href="../res/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../res/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../res/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../res/jquery-ui-1.7.2.min.js"></script>

<script type='text/javascript' src='../dwr/interface/feedsDwr.js'></script>
<script type='text/javascript' src='../dwr/interface/newsAdminDwr.js'></script>
<script type='text/javascript' src='../dwr/engine.js'></script>


<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	font: 0.75em Tahoma, Geneva, sans-serif;
}
#main {
	margin:0 auto;
	position:relative;
	width:81em;
}

.news-list {
	width: 38em;
	float: left;
	margin: 0 0.5em;
}
.news-list-item {
	display: block;
	text-decoration: none;
	padding: 0.125em;
	margin: 0.25em 0;
}
.news-list-item .subject {
	display: block;
	text-decoration: none;
	font-size: 1.5em;
}
.news-list-item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.news-list-item li {
	float: left;
	padding: 0.25em;
}
.news-list-item li.property {
	width: 6em;
}
.news-list-item li.button {
	
}
-->
</style>
<script type="text/javascript">
var scheduledNewsList = null;
var activeNewsList = null;
$(document).ready(function(){
	scheduledNewsList = new NewsList({tagId: 'scheduledNewsList', loader: function(){
		newsAdminDwr.listScheduledNews(function(sresult) {
			scheduledNewsList.setList(sresult.result);
		});
	}});
	activeNewsList = new NewsList({tagId: 'activeNewsList', loader: function(){
		newsAdminDwr.listActiveNews(function(sresult) {
			activeNewsList.setList(sresult.result);
		});
	}});
	scheduledNewsList.refresh();
	activeNewsList.refresh();
	window.setInterval('scheduledNewsList.refresh();activeNewsList.refresh();', 10000);
});

var NewsList = function(misc) {
	if(this == window && typeof misc == 'string') {
		return NewsList.get(misc);
	} else if(typeof misc == 'object') {
		this.config = misc;
		this.tagId = this.config.tagId;
		this._tagId = '#'+ this.config.tagId;
		NewsList.set(this.tagId, this);
	}
};
NewsList.idx = {};
NewsList.set = function(tagId, nl) {
	if(nl)
		NewsList.idx[tagId] = nl;
	else {
		NewsList.idx[tagId] = null;
		delete NewsList.idx[tagId];
	}
};
NewsList.get = function(tagId) {
	return NewsList.idx[tagId] || null;
};
$.extend(NewsList.prototype, {
	setList: function(ls) {
		this.newsList = ls;
		this.showList(ls);
	},
	showList: function(ls) {
		var html = '';
		for(var i=0; i<ls.length; i++)
			html += this.genItemHtml(ls[i]);
		$(this._tagId).children('.news-list-item').remove().end().append(html);
	},
	genItemHtml: function(news) {
		var html = '<div class="news-list-item ui-state-default"><a class="subject">'+ news.subject +'</a>';
		html += '<ul><li class="property" title="createTime">C: %{createTime}</li><li class="property" title="publishTime">P: %{publishTime}</li><li class="property" title="expireTime">E: %{expireTime}</li><li class="property" title="readCount">R: %{readCount}</li><li class="property" title="hotIndex">H: %{hotIndex}</li></ul><div class="clear"></div></div>'
			.replace(/%{createTime}/, news.createTime ? news.createTime.toLocaleTimeString() : '')
			.replace(/%{publishTime}/, news.publishTime ? news.publishTime.toLocaleTimeString() : '')
			.replace(/%{expireTime}/, news.expireTime ? news.expireTime.toLocaleTimeString() : '')
			.replace(/%{readCount}/, news.readCount)
			.replace(/%{hotIndex}/, news.hotIndex);
		return html;
	},
	refresh: function() {
		this.config.loader.call();
	}
});
</script>
</head>

<body>
<div id="main">

	<div id="activeNewsList" class="news-list">
		<div>当前播出新闻</div>
		<div class="news-list-item ui-state-default">
		<a class="subject">这里是标题</a>
		<ul><li class="time">12:13</li><li class="time">23:12</li><li class="time">12:00</li>
		</ul>
		<div class="clear"></div>
		</div>
	</div>
	<div id="scheduledNewsList" class="news-list">
		<div>计划发布新闻</div>
	</div>
	
</div>
</body>
</html>
